<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item><a href="javascript:void(0);">添加货物类型</a></el-breadcrumb-item>
        </el-breadcrumb>
        <el-card :body-style="{ padding: '0px' }">
            <div>
                <h3 class="Add-Fixing-title">添加货物类型</h3>
            </div>
            <div class="Submit-AddFixing">
                <el-button type="primary" @click="AddFixing(`FixingForm`)">确认添加</el-button>
            </div>
            <div>
                <el-card class="Add-Fixing-content">
                    <el-form :model="FixingForm" :rules="FixingFormRules" ref="FixingForm" label-width="100px" class="demo-ruleForm" size="mini">
                        <el-form-item label="设备类型">
                            <el-select v-model="FixingForm.genre" placeholder="请选择设备">
                                <el-option v-for="(item,index) in GenreForm" :key="index" :value='item.name'>
                                </el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="货物名称" prop="name">
                            <el-input v-model="FixingForm.name" placeholder="输入货物名称">
                            </el-input>

                        </el-form-item>

                        <el-form-item label="延迟时间" prop="start_time">
                            <el-input type="number" v-model="FixingForm.delay_time" :step="5" min="0" max="1275">
                            </el-input>
                        </el-form-item>

                        <el-form-item label="描述">
                            <el-input v-model="FixingForm.desc" placeholder="描述(可选)"></el-input>
                        </el-form-item>
                        <el-form-item label="时间间隔" prop="ent_time">
                            <el-input type="number" v-model="FixingForm.ent_time" :step="0.5" min="0" max="127.5">
                            </el-input>
                        </el-form-item>

                        <el-form-item label="理想温度范围:" class="elformitem" style="font-size:12px;" prop="Max_WinDu">
                            <el-input v-model="FixingForm.Min_WenDu" type="number" focus :step="0.1" placeholder="请选择" style="width:150px;">
                            </el-input>
                            <span style="color:#f2f4f6;">———</span>
                            <el-input type="number" v-model="FixingForm.Max_WenDu" :step="0.1" placeholder="请选择" style="width:150px;"></el-input>
                        </el-form-item>
                    </el-form>
                </el-card>
            </div>
            <div style="float:right">
                <el-card class="QuxianTu-AddFixing">
                    <div id="main" style="width: 850px;height:340px;"></div>
                </el-card>
            </div>
            <!-- <div>
                <el-card class="FanWei-AddFixing">
                    <el-form class="FanWei-AddFixing-Form" size="mini" :model="FixingForm" :rules="FixingFormRules" ref="FixingForm">
                        <el-form-item label="理想温度范围:" style="font-size:12px;" prop="Max_WinDu">
                            <el-input v-model="FixingForm.Min_WenDu" type="number" focus :step="0.1" placeholder="请选择" style="width:150px;">
                            </el-input>
                            <span style="color:#f2f4f6;">———</span>
                            <el-input type="number" v-model="FixingForm.Max_WenDu" :step="0.1" placeholder="请选择" style="width:150px;"></el-input>
                        </el-form-item>
                    </el-form>
                </el-card>
            </div> -->
            <div>
                <!-- 报警设置 -->
                <el-card :class="baojing.class" v-for="(baojing,index) in BaoJingEvent" :key="index">
                    <el-container>
                        <el-header>报警设置-主警报{{ index + 1 }}
                            <el-checkbox v-model="baojing.Checked">备选项</el-checkbox>
                        </el-header>
                        <el-main v-if="!baojing.Checked">
                            <span style="font-size:12px;color:red;">未开启报警设置</span>
                        </el-main>
                        <el-main v-if="baojing.Checked">
                            <el-form label-position="top" size="mini">
                                <el-form-item label="报警类型:">
                                    <el-select v-model="baojing.BaoJingTypeValue" placeholder="请选择报警类型">
                                        <el-option v-for="(item,index) in BaoJingType" :key="index" :label="item.label" :value='item.value'>
                                        </el-option>
                                    </el-select>
                                </el-form-item>

                                <el-form-item label="温度范围:" style="font-size:12px;" v-if="baojing.BaoJingTypeValue === '单温上限-单个事件'">
                                    <!-- 上限温度 -->
                                    <el-input type="number" v-model="baojing.Max_WenDu" placeholder="请选择" :step="0.1" style="width:150px;"></el-input>
                                </el-form-item>

                                <el-form-item label="温度范围:" style="font-size:12px;" v-if="baojing.BaoJingTypeValue === '单温下限-单个事件'">
                                    <!-- 下限温度 -->
                                    <el-input type="number" v-model="baojing.Min_WenDu" placeholder="请选择" :step="0.1" style="width:150px;"></el-input>
                                </el-form-item>

                                <el-form-item label="温度范围:" style="font-size:12px;" v-if="baojing.BaoJingTypeValue === '单温度范围-累计事件'">
                                    <!-- 温度范围 -->
                                    <el-input type="number" v-model="baojing.Min_WenDu" placeholder="请选择" :step="0.1" style="width:150px;"></el-input>
                                    <span style="color:#f2f4f6;">———</span>
                                    <el-input type="number" v-model="baojing.Max_WenDu" placeholder="请选择" :step="0.1" style="width:150px;"></el-input>
                                </el-form-item>

                                <el-form-item label="阈值">
                                    <el-input v-model="baojing.YuZhiValue" controls-position="right" :step="0.1" placeholder="请选择" style="width:150px;">
                                    </el-input>
                                    <div class="YuZhi-div">
                                        <el-select v-model="baojing.YuZhiDanWei" placeholder="请选择单位" class="YuZhi-div-select">
                                            <el-option v-for="(item,index) in YuZhiDanWei" :key="index" :label="item.label" :value='item.value'>
                                            </el-option>
                                        </el-select>
                                    </div>
                                    <div class="TiShi" v-if="baojing.BaoJingTypeValue === '单温上限-单个事件'">
                                        如果{{ BaoJingEvent[index].YuZhiValue }}{{ BaoJingEvent[index].YuZhiDanWei }}
                                        单个事件的温度高于{{ BaoJingEvent[index].Max_WenDu }}°C，触发警报。
                                    </div>
                                    <div class="TiShi" v-if="baojing.BaoJingTypeValue === '单温下限-单个事件'">
                                        如果{{ BaoJingEvent[index].YuZhiValue }}{{ BaoJingEvent[index].YuZhiDanWei }}
                                        单个事件的温度低于{{ BaoJingEvent[index].Min_WenDu }}°C，触发警报。
                                    </div>
                                    <div class="TiShi" v-if="baojing.BaoJingTypeValue === '单温度范围-累计事件'">
                                        如果{{ BaoJingEvent[index].YuZhiValue }}{{ BaoJingEvent[index].YuZhiDanWei }}
                                        合计的温度位于{{ BaoJingEvent[index].Min_WenDu }}°C和{{ BaoJingEvent[index].Max_WenDu }}°C之间，触发警报。
                                    </div>
                                </el-form-item>
                            </el-form>
                        </el-main>
                    </el-container>
                </el-card>
            </div>
        </el-card>
    </div>
</template>

<script>
// 导入曲线图包
import echarts from 'echarts'
import { genre_list_get, add_fixing_post } from '../axios_api/api'
import { if_Fix_name, if_delay_time, if_ent_time, if_Max_WinDu } from '../../config'
export default {
    data() {

        return {
            FixingForm: {
                // 设备名称				 货物类型名  延迟时间       货物描述    时间间隔      理想最低温度     理想最高温度
                genre: 'MOT_U202', name: '', delay_time: '5', desc: '', ent_time: '0', Min_WenDu: '', Max_WenDu: '',
            },
            GenreForm: [],
            BaoJingEvent: [
                // check:是否开启报警
                // BaoJingTypeValue：单温事件
                // Min_WinDu：最小温度
                //Max_WenDu：最大温度
                // YuZhiValue：阈值
                // YuZhiDanWei：阈值单位
                { Checked: true, BaoJingTypeValue: '单温上限-单个事件', Min_WenDu: '', Max_WenDu: '', YuZhiValue: '', YuZhiDanWei: '分钟', class: 'BaoJing-AddFixing' },
                { Checked: false, BaoJingTypeValue: '单温上限-单个事件', Min_WenDu: '', Max_WenDu: '', YuZhiValue: '', YuZhiDanWei: '分钟', class: 'BaoJing-AddFixing1' },
                { Checked: false, BaoJingTypeValue: '单温上限-单个事件', Min_WenDu: '', Max_WenDu: '', YuZhiValue: '', YuZhiDanWei: '分钟', class: 'BaoJing-AddFixing2' },
                { Checked: false, BaoJingTypeValue: '单温上限-单个事件', Min_WenDu: '', Max_WenDu: '', YuZhiValue: '', YuZhiDanWei: '分钟', class: 'BaoJing-AddFixing3' },
                { Checked: false, BaoJingTypeValue: '单温上限-单个事件', Min_WenDu: '', Max_WenDu: '', YuZhiValue: '', YuZhiDanWei: '分钟', class: 'BaoJing-AddFixing4' },
                { Checked: false, BaoJingTypeValue: '单温上限-单个事件', Min_WenDu: '', Max_WenDu: '', YuZhiValue: '', YuZhiDanWei: '分钟', class: 'BaoJing-AddFixing4' },
            ],
            // 报警类型
            BaoJingType: [
                { value: '单温上限-单个事件', label: '单温上限-单个事件' }, { value: '单温下限-单个事件', label: '单温下限-单个事件' },
                { value: '单温度范围-累计事件', label: '单温度范围-累计事件' }
            ],
            // 选择阈值单位
            YuZhiDanWei: [
                { value: '分钟', label: '分钟' }, { value: '小时', label: '小时' }, { value: '天', label: '天' }
            ],
        };
    },
    mounted() {
        this.get_genre_list();
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '报警温区'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '邮件营销',
                    type: 'line',
                    stack: '总量',
                    areaStyle: {},
                    data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name: '联盟广告',
                    type: 'line',
                    stack: '总量',
                    areaStyle: {},
                    data: [220, 182, 191, 234, 290, 330, 310]
                },
                {
                    name: '视频广告',
                    type: 'line',
                    stack: '总量',
                    areaStyle: {},
                    data: [150, 232, 201, 154, 190, 330, 410]
                },
                {
                    name: '直接访问',
                    type: 'line',
                    stack: '总量',
                    areaStyle: {},
                    data: [320, 332, 301, 334, 390, 330, 320]
                },
                {
                    name: '搜索引擎',
                    type: 'line',
                    stack: '总量',
                    label: {
                        normal: {
                            show: true,
                            position: 'top'
                        }
                    },
                    areaStyle: {},
                    data: [820, 932, 901, 934, 1290, 1330, 1320]
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    },
    // 验证规则
    computed: {
        FixingFormRules() {
            // 货物类型名验证逻辑
            let name = (rule, value, callback) => {
                // 调用验证函数
                if_Fix_name(rule, value, callback)
            };
            // 延迟时间验证逻辑
            let delay_time = (rule, value, callback) => {
                if_delay_time(rule, value, callback)
            };
            // 间隔时间验证逻辑
            let ent_time = (rule, value, callback) => {
                if_ent_time(rule, value, callback)
            };
            // 温度范围验证逻辑
            let Max_WinDu = (rule, value, callback) => {
                if_Max_WinDu(rule, value, callback, this.FixingForm.Max_WenDu, this.FixingForm.Min_WenDu)
            };
            return {
                // 验证货物类型名
                name: [
                    { validator: name, trigger: 'blur' }
                ],
                // 验证延迟时间
                delay_time: [
                    { validator: delay_time, trigger: 'blur' }
                ],
                // 验证时间间隔
                ent_time: [
                    { validator: ent_time, trigger: 'blur' }
                ],
                // 温度范围验证逻辑
                Max_WinDu: [
                    { validator: Max_WinDu, trigger: 'blur' }
                ],
            }
        }
    },
    methods: {
        // 添加货物
        AddFixing(FixingForm) {
            console.log(this.$refs[FixingForm])
            this.$refs[FixingForm].validate(value => {
                if (!value) return this.$message.error('请完善数据')
                let BaoJing = []
                for (let i = 0; i < this.BaoJingEvent.length; i++) {
                    if (this.BaoJingEvent[i].Checked) BaoJing.push(this.BaoJingEvent[i]);
                }
                console.log(BaoJing)
                let data = { Fixing: this.FixingForm, BaoJing: BaoJing }
                add_fixing_post(data).then(resp => {
                    this.$router.push('/fix_info')
                    this.$message.success('添加成功')
                })
            })
        },
        // 获取设备信息
        get_genre_list() {
            genre_list_get().then(resp => {
                if (resp.code === 200) {
                    this.GenreForm = resp.genrelist
                }
                console.log(resp)

            })
        },
    }
}
</script>

<style lang="scss" scoped>
.el-form-item__label {
    font-size: 12px;
}
.el-input {
    width: 300px;
    height: 20px;
    font-size: 12px;
}
.el-select {
    width: 300px;
    font-size: 12px;
}
.el-option {
    font-size: 22px;
}
.el-header {
    height: 30px !important;
    border-bottom: 1px solid #f2f4f6;
    display: flex;
    justify-content: space-between;
    align-items: center;
    > el-checkbox {
        display: flex;
        align-items: center;
    }
}
.YuZhi-div {
    float: right;
    // margin-right: -50px;
}
.YuZhi-div-select {
    width: 250px;
}
.elformitem {
    margin-top: 50px;
}
</style>